<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-05 
 -->

<template>
  <div class="flex w-screen max-w-sm mx-auto space-x-3 border-b py-2 hover:bg-gray-100 cursor-pointer">
    <label class="flex-1 ">
      <input type="checkbox" :checked="item.status === FINISHED" @click="setStatus(item.id)">
      <span :class="{'line-through': item.status === FINISHED}" class='ml-2 w-32 inline-block text-2xl'>{{item.content}}</span>
    </label>
    <span class="flex-shrink-0 ">
    <button @click="removeTodo(item.id)" class="py-2 px-4 bg-red-600 text-white text-base font-semibold rounded-lg purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200">删除</button>
    <button v-if="item.status !== FINISHED" @click="setDoing(item.id)" :class="[item.status === DOING ? 'bg-red-200 text-gray-400' : 'bg-yellow-600 text-white']" class="ml-3 py-2 px-4 bg-purple-600 text-white text-base font-semibold rounded-lg purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200">
      {{item.status === DOING ? '正在做……' : "马上做……"}}
    </button>

    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { ITodo, TODO_STATUS } from "@/typings";
interface IStatusState {
  WILLDO:TODO_STATUS,
  DOING:TODO_STATUS,
  FINISHED:TODO_STATUS
}
export default defineComponent({
  name: "Item",
  props: {
    item: Object as PropType<ITodo>
  },
  setup(props, { emit, slots }) {
    const statusState = <IStatusState>{
        WILLDO: TODO_STATUS.WILLDO,
        DOING: TODO_STATUS.DOING,
        FINISHED: TODO_STATUS.FINISHED,
    }

    const setStatus = (id: number):void => {
      emit('setStatus', id)
    }
    const removeTodo = (id: number):void => {
      emit('removeTodo', id)
    }
    const setDoing = (id: number):void => {
      emit('setDoing', id)
    }
    return {
      setStatus,
      removeTodo,
      setDoing,
      ...statusState
    };
  },
});
</script>

<style lang="css" scoped></style>
